<template>
  <view class="scenic-container">
    <!-- 顶部标题栏 -->
    <view class="header animate-fade-in">
      <view class="title">景区概况</view>
      <view class="subtitle">了解景区详情，规划您的行程</view>
    </view>

    <!-- 景区轮播图 -->
    <view class="swiper-section animate-scale-in">
      <swiper 
        class="swiper" 
        circular 
        autoplay 
        interval="3000" 
        duration="500"
        indicator-dots
        indicator-active-color="#ff6600"
      >
        <swiper-item v-for="(image, index) in scenicImages" :key="index">
          <image :src="image" mode="aspectFill" class="swiper-image"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 基本信息卡片 -->
    <view class="info-card animate-slide-in">
      <view class="info-header">
        <text class="info-title">景区信息</text>
        <view class="rating">
          <uni-icons type="star-filled" size="16" color="#ff6600"></uni-icons>
          <text class="rating-text">4.8</text>
        </view>
      </view>
      <view class="info-content">
        <view class="info-item">
          <uni-icons type="location" size="16" color="#666"></uni-icons>
          <text>广东省广州市番禺区大学城</text>
        </view>
        <view class="info-item">
          <uni-icons type="calendar" size="16" color="#666"></uni-icons>
          <text>开放时间：09:00-17:30</text>
        </view>
        <view class="info-item">
          <uni-icons type="phone" size="16" color="#666"></uni-icons>
          <text>联系电话：020-12345678</text>
        </view>
      </view>
    </view>

    <!-- 景区介绍 -->
    <view class="description-card animate-slide-in" style="animation-delay: 0.2s">
      <view class="card-title">景区介绍</view>
      <text class="description-text">这里是景区的详细介绍，包括历史背景、文化特色等信息...</text>
      <view class="image-grid">
        <image 
          v-for="(img, index) in descriptionImages" 
          :key="index"
          :src="img"
          mode="aspectFill"
          class="desc-image"
          @tap="previewImage(img)"
        ></image>
      </view>
    </view>

    <!-- 地图区域 -->
    <view class="map-card animate-slide-in" style="animation-delay: 0.3s">
      <view class="card-title">地理位置</view>
      <map
        class="map"
        :latitude="23.123456"
        :longitude="113.123456"
        :markers="markers"
        scale="16"
      ></map>
      <view class="navigation-btn" @tap="openLocation">
        <uni-icons type="location-filled" size="16" color="#fff"></uni-icons>
        <text>导航到这里</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // TODO: 从后端获取轮播图数据
      // GET /api/scenic/carousel
      scenicImages: [
        '/static/scenic/image1.jpg',
        '/static/scenic/image2.jpg',
        '/static/scenic/image3.jpg'
      ],
      
      // TODO: 从后端获取景区介绍图片
      // GET /api/scenic/gallery
      descriptionImages: [
        '/static/scenic/desc1.jpg',
        '/static/scenic/desc2.jpg',
        '/static/scenic/desc3.jpg',
        '/static/scenic/desc4.jpg'
      ],
      
      // TODO: 从后端获取景区位置信息
      // GET /api/scenic/location
      markers: [{
        id: 1,
        latitude: 23.123456,
        longitude: 113.123456,
        title: '景区位置'
      }],
      
      // TODO: 从后端获取景区基本信息
      // GET /api/scenic/info
      scenicInfo: {
        rating: 4.8,
        address: '广东省广州市番禺区大学城',
        openTime: '09:00-17:30',
        phone: '020-12345678',
        description: '这里是景区的详细介绍，包括历史背景、文化特色等信息...'
      }
    }
  },
  
  // 页面加载时获取数据
  onLoad(options) {
    // 接收页面参数
    const scenicId = options.id
    // 根据ID加载对应景区数据
    this.loadScenicData(scenicId)
  },
  
  methods: {
    // TODO: 实现数据加载方法
    async loadScenicData(scenicId) {
      try {
        // 获取轮播图数据
        // const carouselRes = await uni.request({ url: '/api/scenic/carousel' })
        // this.scenicImages = carouselRes.data
        
        // 获取景区介绍图片
        // const galleryRes = await uni.request({ url: '/api/scenic/gallery' })
        // this.descriptionImages = galleryRes.data
        
        // 获取位置信息
        // const locationRes = await uni.request({ url: '/api/scenic/location' })
        // this.markers = locationRes.data
        
        // 获取基本信息
        // const infoRes = await uni.request({ url: '/api/scenic/info' })
        // this.scenicInfo = infoRes.data
      } catch (error) {
        uni.showToast({
          title: '获取景区信息失败',
          icon: 'none'
        })
      }
    },

    // 图片预览
    previewImage(current) {
      uni.previewImage({
        urls: this.descriptionImages,
        current
      })
    },

    // 打开地图导航
    openLocation() {
      // TODO: 使用后端返回的经纬度
      uni.openLocation({
        latitude: this.markers[0].latitude,
        longitude: this.markers[0].longitude,
        name: '景区名称',
        address: this.scenicInfo.address
      })
    }
  }
}
</script>

<style>
.scenic-container {
  padding: 20px;
  background: #f8f8f8;
  min-height: 100vh;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.subtitle {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}

.swiper-section {
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.swiper {
  height: 200px;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.info-card, .description-card, .map-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.info-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.rating {
  display: flex;
  align-items: center;
}

.rating-text {
  margin-left: 5px;
  color: #ff6600;
  font-weight: bold;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.info-item text {
  margin-left: 8px;
  color: #666;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.description-text {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.desc-image {
  width: 100%;
  height: 120px;
  border-radius: 8px;
}

.map {
  width: 100%;
  height: 200px;
  margin-bottom: 15px;
  border-radius: 8px;
}

.navigation-btn {
  background: #ff6600;
  color: #fff;
  height: 44px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navigation-btn text {
  margin-left: 5px;
}

/* 动画效果 */
.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out forwards;
  opacity: 0;
}

.animate-slide-in {
  animation: slideIn 0.6s ease-out forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
